<template>
  <div class="tab">
    <el-tabs v-model="activeName" @tab-click="getSong">
      <el-tab-pane label="单曲" name="1">
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column type="index" :index="indexCount" min-width="15%" align="center">
          </el-table-column>
          <el-table-column prop="name" label="歌曲" min-width="120%" show-overflow-tooltip>
            <template slot-scope="scope">
              <span><i class="el-icon-video-play" @click="getSongUrl(scope.row.id)"></i></span>
              &nbsp;
              <span @click="toSongDetails(scope.row.id)">{{scope.row.name}}</span>
              &nbsp;
              <span @click="toMVDetails(scope.row.mv)"><i v-if="scope.row.mv != 0" id="mvicon" class="el-icon-video-camera"></i></span>
            </template>
          </el-table-column>
          <el-table-column prop="songer" label="歌手" min-width="100%" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toSongerDetails(scope.row.songerId)">{{scope.row.songer}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="album" label="专辑" min-width="80%" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toAlbumDetails(scope.row.albumId)">{{scope.row.album}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时长" min-width="55%" align="center">
          </el-table-column>
        </el-table>
        <el-pagination :page-size="15" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="专辑" name="10">
        <el-table :data="tableData" style="width: 100%" stripe v-if="tableData">
          <el-table-column min-width="35%">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" :alt="scope.row.album" class="songListPic" @click="toAlbumDetails(scope.row.albumId)">
            </template>
          </el-table-column>
          <el-table-column prop="album" label="专辑" min-width="100%" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toAlbumDetails(scope.row.albumId)">{{scope.row.album}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="songer" label="歌手" min-width="140%" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toSongerDetails(scope.row.songerId)">{{scope.row.songer}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="issueDate" label="发行日期" min-width="40%" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination :page-size="15" :pager-count="7" layout="prev, pager, next" :total="150" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="MV" name="1004">
        <el-row :gutter="15" type="flex" style=" flex-wrap: wrap" v-if="tableData">
          <el-col :span="8" v-for="(item,i) in tableData" :key="i">
            <div class="MV">
              <img :src="item.cover" :alt="item.name" @click="toMVDetails(item.id)">
              <div class="songName" @click="toMVDetails(item.id)">{{ item.name }}</div>
              <div class="songer" @click="toSongerDetails(item.songerId)">{{ item.songer}}</div>
            </div>
          </el-col>
        </el-row>
        <el-pagination :page-size="15" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="歌单" name="1000">
        <el-table :data="tableData" style="width: 100%" stripe v-if="tableData">
          <el-table-column min-width="35%">
            <template slot-scope="scope">
              <img :src="scope.row.songListImg" :alt="scope.row.songList" class="songListPic" @click="toSongListDetails(scope.row.id)">
            </template>
          </el-table-column>
          <el-table-column prop="songList" label="歌单" min-width="100%" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toSongListDetails(scope.row.id)">{{scope.row.songList}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="songCount" label="歌曲数" min-width="140%" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="creator" label="创建人" min-width="60%" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="toUserDetails(scope.row.userId)">{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="listening" label="收听" min-width="30%" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination :page-size="15" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="用户" name="1002">
        <table class="user" cellpadding="0" cellspacing="0" v-if="tableData">
          <tr v-for="(item,i) in tableData" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="userimg" @click="toUserDetails(item.id)"><img :src="item.userImg" :alt="item.userName"></td>
            <td @click="toUserDetails(item.id)">{{ item.userName }}</td>
            <td class="songList">{{ item.songlistCount }}</td>
            <td class="fans">{{ item.fans }}</td>
          </tr>
        </table>
        <el-pagination :page-size="15" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSearchSong, getSongUrl } from "../../network/search"

export default {
  name: "SearchList",
  data() {
    return {
      //默认类别
      activeName: "1",
      //存放搜索到的歌曲
      songList: "",
      //索引
      indexCount: 1,
      //将结果显示到页面表格中
      tableData: [],
      songUrl: "",
      //默认显示在第几页
      currentPage: 1,
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
    };
  },
  computed: {
    songTitle() {
      //将sessionStorage内容放入songTitle
      return sessionStorage.getItem("songTitle");
    }
  },
  created() {
    this.getSearchSong(this.currentPage, this.songTitle, this.activeName);
  },
  watch: {
    //监听songTitle 一旦发生改变就发送请求
    songTitle: {
      immediate: true,
      handler(newValue) {
        this.getSearchSong(this.currentPage, newValue, this.activeName);
      }
    },
  },
  methods: {
    getSong() {
      this.getSearchSong(this.currentPage, this.songTitle, this.activeName);
      this.currentPage = 1;
    },
    getSearchSong(offset, songTitle, type) {
      getSearchSong(offset, songTitle, type).then(res => {
        //判断查询的是哪一类
        switch (type) {
          case "1":
            this.songList = res.data.result.songs;
            this.tableData = [];
            if (this.songList != null) {
              for (let i = 0; i < this.songList.length; i++) {
                this.tableData.push({
                  id: this.songList[i].id,
                  name: this.songList[i].name,
                  mv: this.songList[i].mv,
                  songer: this.songList[i].ar[0].name,
                  songerId: this.songList[i].ar[0].id,
                  album: this.songList[i].al.name,
                  albumId: this.songList[i].al.id,
                  time: this.formatDateTime(this.songList[i].dt),
                });
              }
            }
            break;

          case "10":
            this.songList = res.data.result.albums;
            this.tableData = [];
            if (this.songList != null) {
              for (let i = 0; i < this.songList.length; i++) {
                this.tableData.push({
                  picUrl: this.songList[i].picUrl,
                  albumId: this.songList[i].id,
                  album: this.songList[i].name,
                  songer: this.songList[i].artist.name,
                  songerId: this.songList[i].artist.id,
                  issueDate: this.formatDate(this.songList[i].publishTime),
                });
              }
            }
            break;

          case "1004":
            this.songList = res.data.result.mvs;
            this.tableData = [];
            if (this.songList != null) {
              for (let i = 0; i < this.songList.length; i++) {
                this.tableData.push({
                  id: this.songList[i].id,
                  cover: this.songList[i].cover,
                  name: this.songList[i].name,
                  songer: this.songList[i].artistName,
                  songerId: this.songList[i].artistId,
                });
              }
            }
            break;

          case "1000":
            this.songList = res.data.result.playlists;
            this.tableData = [];
            if (this.songList != null) {
              for (let i = 0; i < this.songList.length; i++) {
                this.tableData.push({
                  id: this.songList[i].id,
                  songListImg: this.songList[i].coverImgUrl,
                  songList: this.songList[i].name,
                  songCount: this.songList[i].trackCount + "首",
                  creator: this.songList[i].creator.nickname,
                  userId: this.songList[i].userId,
                  listening: this.formatNumber(this.songList[i].playCount),
                });
              }
            }
            break;

          case "1002":
            this.songList = res.data.result.userprofiles;
            this.tableData = [];
            if (this.songList != null) {
              for (let i = 0; i < this.songList.length; i++) {
                this.tableData.push({
                  id: this.songList[i].userId,
                  userImg: this.songList[i].avatarUrl,
                  userName: this.songList[i].nickname,
                  songlistCount: "歌单：" + this.songList[i].playlistCount,
                  fans: "粉丝数：" + this.songList[i].followeds,
                  userId: this.songList[i].userId,
                });
              }
            }
            break;
        }
      })
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    },
    getSongUrl(id) {
      getSongUrl(id).then(res => {
        localStorage.setItem("songUrl", res.data.data[0].url);
        //刷新页面 input传入过去 其中内容改了 但是页面还是原来的 需要刷新显示
        location.reload()
      })
    },
    //获取当前页数 val为当前在第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSearchSong(val, this.songTitle, this.activeName);
      this.indexCount = val * 15 - 14;
    },
    //跳转到播放mv界面
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    toSongListDetails(id) {
      this.$router.push({ name: "SongListDetail", params: { id: id } });
    },
    toSongDetails(id) {
      this.$router.push({ name: "SongDetails", params: { id: id } });
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
    },
    toAlbumDetails(id) {
      this.$router.push({ name: "AlbumDetails", params: { id: id } });
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
  },
}
</script>

<style scoped>
.tab {
  margin: 30px 150px 0 150px;
}
.tab /deep/.el-tabs__item {
  font-size: 1.25rem !important;
}
#mvicon:hover {
  background: RGB(64, 158, 255);
}
.el-pagination {
  margin: 3% 0 2% 35%;
}
.songListPic {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.MV img {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
.songName {
  font-size: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.songName:hover {
  color: RGB(64, 158, 255);
}
.songer {
  font-size: 1rem;
  margin-bottom: 10px;
  color: RGB(153, 153, 153);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.songer:hover {
  color: RGB(64, 158, 255);
}
.user {
  width: 100%;
}
.userimg {
  width: 60px;
  height: 60px;
}
.userimg img {
  width: 100%;
  height: 100%;
  border-radius: 50px;
}
.user tr td {
  border-top: 1px solid RGB(235, 238, 245);
  border-bottom: 1px solid RGB(235, 238, 245);
  padding: 12px;
}
.songList {
  width: 20%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.fans {
  width: 20%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.user tr:hover {
  background: RGB(245, 247, 250);
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
.red {
  background: rgb(123, 123, 123);
}
</style>